<template>
    <div class="test">
        <!-- 表格列表 -->
        <Row type="flex" justify="space-around" style="margin-top:10px;">
            <Col span="24">
                <Table stripe :columns="columns" :data="datalist"></Table>
            </Col>
        </Row>
        <!-- 页码 -->
        <div class="page">
            <Page :total="count" :current='pageNo' :page-size="pageSize" show-total show-elevator @on-change="getdatalist" />
        </div>
        <div class="margin-up-down" style="text-align:center">
            <Button @click="back">
                返回
            </Button>
        </div>
    </div> 
</template>

<script>
import api from "@/api/commonApi";
export default {
    data() {
        return {
            count: 0,
            pageSize: 10,
            pageNo: 1,
            columns: [
                {
                    title: "排序",
                    key: "iSum",
                    align: "center",
                    render: (h, params) => {
                        let iSum = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", iSum);
                    }
                },
                {
                    title: "姓名",
                    key: "name",
                    align: "center"
                },
                {
                    title: "身份证号",
                    key: "idcard",
                    align: "center"
                },
                {
                    title: "手机号",
                    key: "telephone",
                    align: "center",
                    // width: 200
                },
                {
                    title: "采集点",
                    key: "locationName",
                    align: "center",
                    // width: 200
                },
                {
                    title: "实际采集地点",
                    key: "taskLocation",
                    align: "center",
                },
                {
                    title: "采集类型",
                    key: "collcectType",
                    align: "center",
                    render: (h, params) => {
                        let collcectType = params.row.collcectType;
                        if(collcectType == 1) {
                            collcectType = '上门'
                        } else if(collcectType == 0) {
                            collcectType = '定点'
                        }
                        return h("span", collcectType);
                    }
                },
                {
                    title: "样本编号",
                    key: "tubesCode",
                    align: "center",
                },
                {
                    title: "采集时间",
                    key: "collectionTime",
                    align: "center",
                },
                {
                    title: "设置",
                    key: "install",
                    align: "center",
                    render: (h, params) => {
                        let reportUrl = params.row.reportUrl
                        return h(
                            "a",
                            {
                                attrs: {
                                    href: "javascript:void(0);"
                                },
                                style: {
                                    color: " #5362e1",
                                    width: "60px"
                                },
                                on: {
                                    click: () => {
                                        window.open(reportUrl);
                                    }
                                }
                            },
                            '检验报告'
                        );
                    } 
                },
            ],
            datalist: [],
            result: '',
            tubesId: '',
        }
    },
    created() {},
    mounted() {
        this.tubesId = this.$route.query.tubesId ? this.$route.query.tubesId : null;
        this.result = this.$route.query.result ? this.$route.query.result : null;
        if(!this.result) {
            this.columns = this.columns.filter(col => col.key !== 'install')
        }
        this.getdatalist(1);
    },
    methods: {
        getdatalist(pageNo) {
            this.pageNo = pageNo
            let parmas = {
                pageNo: this.pageNo,
                pageSize: 10,
                tubesId: this.tubesId,
            }
            this.$axios
                .post(api.getCollectTubesDetailsIpage, parmas)
                .then(resp => {
                    if (resp.data.success) { 
                        this.count = resp.data.object.total
                        if(resp.data.object.records) {
                            this.datalist = resp.data.object.records;
                        } else {
                            this.datalist = []
                        }                                      
                    } else {
                        this.datalist = []
                        this.$Message.info("不允许访问");
                    }
                })
                .catch(err => {
                    this.datalist = []
                    console.log(err);
                });
        },
        back() {
            this.functionJS.queryNavgationTo(
                this,
                "/index/nucleicacid/test/list",
                {
                    typeStatus: 1,
                    pageNo: 1
                }
            );
        },
    },
}
</script>

<style lang="less" scoped>
.test {
    width: calc(100%);
    padding: 10px 30px;
    margin: 0 auto;
    background: #fff;
    min-height: 600px;
    .page{
        text-align: center;
        margin: 20px 0;
    }
}
</style>